<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        /*
        需求：
        1.选择id为div1的元素
        2.选择所有的div元素
        3.选择所有class属性为box的元素
        4.选择所有的div和span元素
        5.选择所有class属性为box的div元素
        */

        //1.选择id为div1的元素,注意事项：得预设一个环境让该代码直接运行
        $(function(){
            var $div1=$("#div1");
            $div1.css("background-color","red");
        })

        //2.选择所有的div元素
        $(function(){
            var $div=$("div");
            $div.css("font-size","20px");
        })

        //3.选择所有class属性为box的元素
        $(function(){
            var $box=$(".box");
            $box.css("color","blue");
        })

        //4.选择所有的div和span元素
        $(function(){
            var $div_span=$("div,span");
            $div_span.css("text-decoration","underline");
        })

        //5.选择所有class属性为box的div元素
        $(function(){
            var $box_div=$("div.box");
            $box_div.css("font-weight","1000");
        })
    </script>
</head>
<body>
    <!--
        选择器说明：
        选择器本身只是一个有特定语法规则的字符串你，没有实质用处
        它的基本语法规则使用的就是CSS的选择器语法，并对基进行了扩展
        只有调用$，并将选择器作为参数传入才能起作用
        $(selector)作用：
        根据选择器规则在整个文档中查找所有匹配的标签的数组，并封装成jQuery对象
        分类：
        基本选择器
        最基本常用的选择器： #id  element  .class  *  selector1,selector2,selectorN  selector1selector2selectorN
        
        层次选择器
        查找子元素，后代元素，兄弟元素的选择器： ancestor descendant ； parent > child ； prev + next ； prev ~ siblings

        过滤选择器
        在原有选择器匹配的元素中进一步进行过滤的选择器：基本  内容  可见性 属性

        表单选择器
        表单：表单对象属性
    -->
    <div id="div1" class="box">div1(class="box")</div>
    <div id="div2" class="box">div2(class="box")</div>
    <div id="div3">div3</div>
    <span class="box">span(class="box")</span>
    <br>
    <ul>
        <li>AAAAA</li>
        <li title="hello">BBBBB(title="hello")</li>
        <li class="box">CCCCC(class="box")</li>
        <li title="hello">DDDDD(title="hello")</li>
    </ul>
</body>
</html>